<template>
    <div class="container">
        <div class="searchdiv">
            <el-card class="box-card" shadow="never">
                <el-divider content-position="left"><i class="el-icon-search"></i>&nbsp;&nbsp;根据手机号码查询</el-divider>
                <div class="serch">
                    <el-form :inline="true" ref="searchform" :model="formInline" class="demo-form-inline">
                        <el-form-item label="手机号">
                            <el-input v-model="formInline.tel" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="default" @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
        <div class="czbtn">
            <el-button icon="el-icon-download" size="small" @click="exportXlsx()">导出所有数据</el-button>
        </div>
        <div class="sj">
            <el-table :data="tableData.slice((currentPage-1)*pageItem,currentPage*pageItem)" style="width: 100%"
                ref="multipleTable">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column v-for="(item,index) in cols" :prop="item.prop" :key="index" :label="item.label">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)"
                            icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="center">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-size="pageItem" layout="total, prev, pager, next, jumper"
                    :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { switchDateYYTMhms } from '@/util/index'
export default {
    props: {
        id: {}
    },
    data() {
        return {
            formInline: {
                tel: ''
            },
            currentPage: 1,
            pageItem: 10,
            cols: [
                { prop: 'area', label: '推广地区' },
                { prop: 'phone', label: '手机号' },
                { prop: 'zctime', label: '注册时间' }
            ],
            tableData: []
        }
    },
    created() {
        this.id && this.getData()
    },
    methods: {
        async getData() {
            const result = await this.$http.get(`/job/search/${this.id}`)
            if (result.data.status == 1) {
                this.tableData = result.data.data
            } else {
                this.$message.error(result.data.msg)
            }
        },
        // 删除手机号
        handleDelete(index, row) {
            this.$http.get('/job/deletePhone', {
                params: {
                    phone: row.phone,
                    routeId: this.$route.query.dataId
                }
            }).then(res => {
                if (res.data.status == 1) {
                    this.$message.success(res.data.msg)
                    this.getData()
                } else {
                    this.$message.error(res.data.msg)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 导出表格
        exportXlsx() {

        },
        // 查询数据
        onSubmit() {
            if (!this.formInline.tel) {
                this.$message.error('请填写电话号码')
                return false
            } else {
                this.tableData = this.tableData.filter(item => {
                    return item.phone.includes(this.formInline.tel)
                })
            }
        },
        resetForm() {
            window.location.reload()
        }
    }
}
</script>

<style>
.container{
    margin-right: 20px;
}
.center {
    text-align: center;
    margin: 10px auto;
}
.czbtn {
    display: flex;
    align-items: center;
}
.searchdiv {
    margin-bottom: 20px;
}
.el-form-item {
    margin: 0;
}
</style>